<template>
  <div class="monitor-page">
    <Card class="search-banner">
      <table-search
      :queryFormItem="queryFormItem"
      :collapseFormItem="collapseFormItem"
      :data="filter"
      :labelWidth="labelWidth"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></table-search>
    </Card>
    <Card>
      <p slot="title">是个能源图</p>
      <starLine
      :config="lineConfig"
      :language="lineLanguage"
      :data="chartData"
    ></starLine>
    </Card>
    <cfg-sheet v-bind="bindConfig" :splitHeight="600"></cfg-sheet>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import mixin from "@/pages/components/mixins/mixin";
export default {
  components: { TableSearch },
  mixins: [mixin],
  props: {
    queryFormItem: {
      default: () => []
    },
    collapseFormItem: {
      default: () => []
    },
    type: {
      default: ''
    }
  },
  data() {
    return {
      filter: {},
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
      lineLanguage: {
        "en-US": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      chartData: {},
      bindConfig: {
        showTotal: false,
        columns: [
          {
            type: "index",
            width: 70,
            align: "center",
          },
          {
            title: "能源名称",
            key: "sf_energyName",
            minWidth: 70,
          },
          {
            title: "能源编码",
            key: "sf_energyCode",
            minWidth: 80,
          },
          {
            title: "数值",
            key: "value",
            minWidth: 80,
          },
          {
            title: "时间",
            key: "time",
            minWidth: 80,
          },
          {
            title: "能源类别",
            key: "sf_energyType",
            minWidth: 80,
          },
          {
            title: "能源类别名称",
            key: "sf_energyTypeName",
            minWidth: 80,
          },
          {
            title: "采集点名称",
            key: "sf_pointName",
            minWidth: 80,
          },
        ],
        data: [
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
          {sf_energyName: 1},
        ],
      },
      labelWidth: 80,
    };
  },
  computed: {
    lang() {
      return {
        "en-US": {
          cancel: "cancel",
          confirmDelete: "confirm delete?",
        },
        "zh-CN": {
          cancel: "取消",
          confirmDelete: "确认删除？",
        },
      }[this.G_Locale];
    },
  },
  mounted() {
    let dom = document.querySelector('.ivu-table-body')
    console.log(dom.addEventListener, dom.scrollHeight, dom.scrollTop, dom.clientHeight)
    const that = this
    dom.addEventListener('scroll', function () {
      // scrollDistance 为零时滚动到底部
      const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
      console.log(scrollDistance, '------', dom.scrollHeight, dom.scrollTop, dom.clientHeight)
      if (scrollDistance <= 0) { // 等于0证明已经到底，可以请求接口
      if(that.bindConfig.data.length > 30) return
        that.bindConfig.data.push(...[
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
          {sf_energyName: '5'},
        ])
      }
    })
  },
  methods: {
    handleSearch() {
      let { energyType, scale, timeRange, beginTime, endTime } = this.filter;
      if (!energyType || !scale || !timeRange) {
        this.$Message.error("请选择能源类型、粒度和时间区间");
        return;
      }
      if (!!timeRange && Array.isArray(timeRange)) {
        beginTime = timeRange[0];
        endTime = timeRange[1];
      }
      //当粒度是分钟，由于后台数据量大，只能选择一天时间
      let diffTime = this.tools.dayjs(endTime).diff(this.tools.dayjs(beginTime));
      if(scale == '分' && diffTime > 60*60*24*1000){
        this.$Message.error("粒度为分，最多选择一天时间");
        return;
      }
      let params = { ...this.filter, beginTime, endTime };
      this.$api.Custom.energyMonitor(params).then((res) => {
        if (!res) {
          return;
        }
        let { categories, values } = res;
        this.$set(this, "chartData", {
          categories,
          values: this.transValues(values),
        });
        this.$set(this.bindConfig, "data", res.dataList || []);
      });
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    },
  },
};
</script>
<style scoped lang="scss">
.monitor-page {
  padding-top: 10px;
}
.search-banner {
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
  p {
    text-align: center;
  }
}
::v-deep .ivu-card-head {
  padding: 5px 16px;
  border: none
}

</style>
